import React from 'react';
import styles from './workingAreaCheckBox.css';
import { Button,Tag  } from 'antd-mobile'

const checkBox = ({
  textName = '',
  valueArr = [],
  selectArr = [],
  onClick, select, onRemove,onSelect
}) => {

  // console.log('valueArr', JSON.stringify(valueArr));
    // console.log('selectArr', JSON.stringify(selectArr));

  function onChange(e,item){
    // console.log("e");
    // console.log(e);
    // console.log(item);
    if (e) {
      selectArr.push(item)
    } else {
      for ( var i=0;i<selectArr.length; i++) {
        if (selectArr[i].id == item.id) {
          selectArr.splice(i,1)
        }
      }
    }
    onSelect(selectArr)
  }

  return(
    <div className={styles.container}>
      <div className={styles.textName}>
        {textName}
      </div>
      <div className={styles.tagContainer}>
        {valueArr.map((item, index) => {
          var selected = false
          if (selectArr.length>0) {
            for (var i=0;i<selectArr.length;i++) {
              if (item.id == selectArr[i].id) {
                selected = true
              }
            }
          }
          if (selected) {
            return (
              <Tag key={index.toString()}
                selected='true'
                value={item.name}
                onChange={(e)=>onChange(e,item)}>
                {item.name}
              </Tag>
            )
          } else {
            return (
              <Tag key={index.toString()}
                value={item.name}
                onChange={(e)=>onChange(e,item)}>
                {item.name}
              </Tag>
            )
          }


        })}
      </div>
    </div>
  )
}

export default checkBox;
